<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="wordpress-desktop.css" />
	</head>
	<body style="background: #1E1E1E; color: #1E1E1E">
		<div id="title-bar">
			<div id="title-bar-buttons">
				<div class="nav-button" id="nav-button-back">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4451 18.0045L7.98645 12L13.4451 5.99548L14.555 7.00449L10.0136 12L14.555 16.9955L13.4451 18.0045Z"/>
					</svg>
				</div>
				<div class="nav-button" id="nav-button-forward">
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5549 5.99554L16.0135 12L10.5549 18.0045L9.44495 16.9955L13.9863 12L9.44495 7.00456L10.5549 5.99554Z"/>
					</svg>
				</div>
				<div class="nav-button" id="nav-button-home">
					<svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false">
						<path d="M29.3334 16C29.3334 8.65335 23.3467 2.66669 16 2.66669C8.64002 2.66669 2.66669 8.65335 2.66669 16C2.66669 23.36 8.64002 29.3334 16 29.3334C23.3467 29.3334 29.3334 23.36 29.3334 16ZM13.04 23.16L8.49335 10.96C9.22669 10.9334 10.0534 10.8534 10.0534 10.8534C10.72 10.7734 10.64 9.34669 9.97335 9.37335C9.97335 9.37335 8.04002 9.52002 6.81335 9.52002C6.57335 9.52002 6.32002 9.52002 6.04002 9.50669C8.16002 6.25335 11.8267 4.14669 16 4.14669C19.1067 4.14669 21.9334 5.30669 24.0667 7.26669C23.16 7.12002 21.8667 7.78669 21.8667 9.37335C21.8667 10.36 22.4667 11.1867 23.0667 12.1734C23.5334 12.9867 23.8 13.9867 23.8 15.4534C23.8 17.44 21.9334 22.12 21.9334 22.12L17.8934 10.96C18.6134 10.9334 18.9867 10.7334 18.9867 10.7334C19.6534 10.6667 19.5734 9.06669 18.9067 9.10669C18.9067 9.10669 16.9867 9.26669 15.7334 9.26669C14.5734 9.26669 12.6267 9.10669 12.6267 9.10669C11.96 9.06669 11.88 10.7067 12.5467 10.7334L13.7734 10.84L15.4534 15.3867L13.04 23.16ZM25.88 16C26.2 15.1467 26.8667 13.5067 26.4534 10.3334C27.3867 12.0534 27.8534 13.9467 27.8534 16C27.8534 20.3867 25.5467 24.32 21.9867 26.3734C23.28 22.92 24.5734 19.44 25.88 16ZM10.8 26.7867C6.82669 24.8667 4.14669 20.7067 4.14669 16C4.14669 14.2667 4.45335 12.6934 5.10669 11.2134C7.00002 16.4 8.89335 21.6 10.8 26.7867ZM16.1734 17.9467L19.6134 27.2534C18.4667 27.64 17.2667 27.8534 16 27.8534C14.9467 27.8534 13.9067 27.7067 12.9467 27.4134C14.0267 24.24 15.1067 21.0934 16.1734 17.9467Z"/>
					</svg>
				</div>
			</div>
		</div>
		<script>
      function handleDoubleClick() {
        const titleBar = document.getElementById('title-bar');
        titleBar.addEventListener('dblclick', function () {
          window.electron.send('title-bar-double-click');
        });
      }
      handleDoubleClick();
			function Navigate() {
				const titleBarButtons = document.getElementById( 'title-bar-buttons' );
				// Override title bar button padding on window load (Linux, Windows)
				window.addEventListener( 'load', function() {
					const padding = window.electron.styles.titleBarPaddingLeft;
					titleBarButtons.style.paddingLeft = padding;
				})

				const backButton = document.getElementById( 'nav-button-back' );
				backButton.addEventListener( 'click', function() {
					window.electron.send( 'back-button-clicked' );
				});

				const forwardButton = document.getElementById( 'nav-button-forward' );
				forwardButton.addEventListener( 'click', function() {
					window.electron.send( 'forward-button-clicked' );
				});

				const homeButton = document.getElementById( 'nav-button-home' );
				homeButton.addEventListener( 'click', function() {
					window.electron.send( 'home-button-clicked' );
				});
			};

			var nav = new Navigate();
		</script>
	</body>
</html>
